/**
 * @intro: haoguosheng
 * @Date: 2019-05-10 15:51:16
 */
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, Switch, Redirect } from 'react-router-dom'
import Product from '../../../service/product-service';
import './category-selector.scss'

const _product = new Product()

class ProductRouter extends Component {
	constructor(props) {
		super(props);
		this.state = {
			firstCategoryList: [],
			firstCategoryId: 0,
			secondCategoryList: [],
			secondCategoryId: 0,
		};
	}

	componentWillReceiveProps(nextProps) {
		let categoryIdChange = this.props.categoryId != nextProps.categoryId,
				parentCategoryIdChange = this.props.parentCategoryId != nextProps.parentCategoryId;

		// 如果数据没有发生变化，直接不做处理
		if(!categoryIdChange && !parentCategoryIdChange) {
			return false
		}
		// 假如只有一级品类
		if(nextProps.parentCategoryId === 0) {
			this.setState({
				categoryId: nextProps.categoryId,
				secondCategoryId: 0
			})
		}
		else {
			this.setState({
				firstCategoryId: nextProps.parentCategoryId,
				secondCategoryId: nextProps.categoryId,
			},()=>{
				parentCategoryIdChange && this.loadSecondCategory();
			})
		}
	}

	componentDidMount () {
		this.loadFirstCategory();
	}

	// 加载一级分类
	loadFirstCategory () {
		_product.getCategoryList().then(res=>{
			this.setState({
				firstCategoryList: res
			})
		})
	}

	// 加载二级分类
	loadSecondCategory() {
		_product.getCategoryList(this.state.firstCategoryId).then(res=>{
			this.setState({
				secondCategoryList: res
			})
		})
	}

	// 选择一级品类
	onFirstCategoryChange(e) {
		if(this.props.readOnly) {
			return
		}
		let newValue = e.target.value || 0
		this.setState({
			firstCategoryId: newValue,
			secondCategoryId: 0,
			secondCategoryList: []
		}, () => { // setState的异步回调
			this.loadSecondCategory()
			this.onPropsCategoryChange();
		})
	}

	// 选择二级品类
	onSecondCategoryChange(e) {
		if(this.props.readOnly) {
			return
		}
		let newValue = e.target.value || 0
		this.setState({
			secondCategoryId: newValue
		}, () => { // setState的异步回调
			this.onPropsCategoryChange();
		})
	}

	// 传给父组件选中的结果
	onPropsCategoryChange() {
		// 判断是不是有这个函数
		let categoryChangable = typeof this.props.onCategoryChange === 'function';
		// 如果有二级分类
		if(this.state.secondCategoryId) {
			categoryChangable && this.props.onCategoryChange(this.state.secondCategoryId,this.state.firstCategoryId)
		} else { // 如果只有一级分类
			categoryChangable && this.props.onCategoryChange(this.state.firstCategoryId, 0)
		}
	}


	render() {
		return (
			<div>
				<div className="col-sm-10">
					<select id="" className="form-control cate-select"
						onChange={e=>this.onFirstCategoryChange(e)}
						value={this.state.firstCategoryId}
						readOnly= {this.props.readOnly}
					>
						<option value="">请选择一级分类</option>
						{
							this.state.firstCategoryList.map((category,index) => {
								return <option value={category.id} key={index}>{category.name}</option>
							})
						}
					</select>
					{this.state.secondCategoryList.length ?
						(
							<select name="" id="" className="form-control cate-select"
								value={this.state.secondCategoryId}
								onChange={e=>this.onSecondCategoryChange(e)}
								readOnly= {this.props.readOnly}
							>
								<option value="">请选择二级分类</option>
								{
									this.state.secondCategoryList.map((category,index) => {
										return <option value={category.id} key={index}>{category.name}</option>
									})
								}
							</select>
						): null
					}
				</div>
			</div>
		);
	}
}

export default ProductRouter;
